<!-- 父组件 -->
<template>
	<div>
		<!--1.通过prop实现通信-->

		<!-- （1）静态传递 -->
		<h1>我是父组件！</h1>
		<!-- 通过自定义属性传递数据 -->
		<child message="我是子组件一！"/>
		<p>----------------------------</p>

		<!-- （2）动态传递（v-bind） -->
		<!-- 这是一个JavaScript的表达式而不是一个字符串 -->
		<child v-bind:message="a+b"/>
		<!-- 用一个变量进行动态赋值 -->
		<child v-bind:message="msg"/>
		<p>----------------------------</p>

		<!-- 2.通过$ref实现 -->
		<h1>我是父组件！</h1>
		<child ref="msg"/>
		<p>----------------------------</p>

		<!-- 3.通过$emit实现 -->
		<h1>{{title}}</h1>
		<child @getMsg="showMessage"/>
	</div>
</template>

<script>
	import Child from './Child.vue'
	
	export default {
		name: 'Father',
		components: {
			Child
		},
		data() {
		    return {
		        a: '我是子组件二！',
				b: 112233,
				msg: '我是子组件三！' + Math.random(),
				title: ''
			}
		},
		mounted: function () {
            console.log(this.$refs.msg);
            this.$refs.msg.getMessage('我是子组件一！')
        },
		methods: {
		    showMessage(title) {
		        this.title = title
			}
		}
	}
</script>

<style>
</style>
